<apes-header>
  <apes-button-list class="buttonList" [ctx]="ctx" [buttonBarMetadata]="buttonBar"
                    (click)="onEvent($event)"></apes-button-list>
</apes-header>

<apes-content id="content">
  <apes-card [apesBordered]="false">
    <!-- header -->
    <div class="header-nav">
      <!-- header-left -->
      <div class="header-left">
        <div class="title">
          <p>续保分析</p>
        </div>
      </div>
    </div>

    <div class="boxShow" apes-row [apesGutter]="24" apesSpan="16" [ngStyle]="{ display: hidn }">

      <div apes-col apesSpan="10">
        <span>时间：</span>
        <div class="boxDiv">
          <apes-range-picker [(ngModel)]='mdjcTime' [apesFormat]="'yyyy-MM-dd'"></apes-range-picker>
        </div>
      </div>

      <div apes-col apesSpan="8">
        <span>公司：</span>
        <ng-select style="width: 240px; display: inline-block;"
                   typeToSearchText
                   [items]="companyData"
                   multiple="true"
                   bindLabel="name"
                   bindValue="id"
                   placeholder="选填，可多选"
                   [(ngModel)]="companyList"
                   [notFoundText]="'无法找到'">
        </ng-select>
      </div>
    </div>

    <!-- shujuxianhsi -->
    <div apes-row [apesGutter]="16">
      <div apes-col [apesSm]="24" [apesMd]="12">
        <!-- 饼图  新保数/续保数 占比-->
        <apes-card [apesBordered]="false" [apesTitle]="'新保数和续保数占比'" [apesBodyStyle]="{'padding.px': 24}"
                   class="sales-card"
                   style="min-height: 200px;">
          <apes-pie [hasLegend]="true" [height]="200" [inner]="0" [lineWidth]="1" [data]="salesPieData"
                    [valueFormat]="">
          </apes-pie>
        </apes-card>
      </div>

      <div apes-col [apesSm]="24" [apesMd]="12">
        <!-- 饼图  新保率 -->
        <apes-card [apesBordered]="false" [apesTitle]="'已续保和已过期占比'" [apesBodyStyle]="{'padding.px': 24}"
                   class="sales-card"
                   style="min-height: 200px;">
          <apes-pie [hasLegend]="true" [height]="200" [inner]="0" [lineWidth]="1" [data]="pieData" [valueFormat]="">
          </apes-pie>
        </apes-card>
      </div>

      <div apes-col nzSm="24" apesMd="24">
        <!-- 曲线图 近7天出单趋势 -->
        <apes-card [apesBordered]="false" [apesTitle]="title">
          <ng-template #title>
            本月续保趋势图
          </ng-template>
          <apes-bar height="200" [data]="sevenData" [padding]="[ 35, 35, 45, 45 ]" [chartType]="'line'"></apes-bar>
        </apes-card>
      </div>
    </div>


    <!-- table -->
    <div>
      <ag-grid-angular #grid
                       style="width: 100%;" [ngStyle]="{ height: height }" class="ag-theme-balham"
                       enableColResize="true"
                       enableSorting="true"
                       enableFilter="true"

                       suppressLoadingOverlay="true"

                       [rowData]="rowData"
                       [gridOptions]="gridOptions"
                       [columnDefs]="columnDefs"
                       [pinnedBottomRowData]="pinnedBottomRowData">
      </ag-grid-angular>
    </div>
  </apes-card>
</apes-content>
